<template>
  <div class="userdetail">
    <div>
        <div class="user-img">
          <img v-if="userInfo.user_img" :src="userInfo.user_img" alt="">
          <img v-else src="@/assets/img/user.jpg" alt="">
        </div>
        <div class="user_edit">
            <div class="user_edit-top">
               <p>
                   <span>0</span>
                   <span class="user-text">粉丝</span>
               </p>
               <p>
                   <span>54</span>
                   <span class="user-text">关注</span>
               </p>
               <p>
                   <span>0</span>
                   <span class="user-text">获赞</span>
               </p>
            </div>
            <div class="user_edit-bottom" @click="$router.push('/edit')">
                <div>编辑资料</div>
            </div>
        </div>
    </div>
    <div class="introduce">
      <h2>{{userInfo.name}}</h2>
      <p v-if="userInfo.user_desc">{{userInfo.user_desc}}</p>
      <p v-else>这个人很神秘，什么都没有写</p>
    </div>
  </div>
</template>

<script>
export default {
  props:['userInfo']
}
</script>

<style lang="stylus" scoped>
  .userdetail
    background-color white
    padding 0 3.3333vw
    >div 
      display flex
      .user-img
        margin-right 5.5556vw
        img
          width 23.6111vw
          height 23.6111vw
          border-radius 50%
      .user_edit
        display flex
        flex 1
        flex-direction column
        justify-content space-around
        .user_edit-top
          display flex
          p
            flex 1
            display flex
            justify-content center
            align-items center
            flex-direction column
            font-size 3.8889vw
            .user-text
              color #aaa
          p:nth-child(1),p:nth-child(2)
            border-right 0.2778vw solid #ccc 
        .user_edit-bottom
          border 0.2778vw solid #0daaf1
          padding 0.8333vw
          display flex
          justify-content center
          align-items center
          color #0daaf1
          border-radius 1.1111vw
    .introduce
      display flex
      flex-direction column
      h2
        margin 10px 0 3px 0
        font-weight 400
      p
        padding  0
        margin 10px 0
        color #999
      
      
     
      
</style>